<template>
  <div class="hzs-ask-question">
    <!-- status-icon 当表单校验不通过时, 输入框右侧有个 x 小图标 -->
    <el-form
      :rules="rules"
      ref="formData"
      :model="formData"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="标题:" prop="title">
        <el-input v-model="formData.title" placeholder="请输入标题"
                  maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="标签:" prop="labelIds">
        <!--:show-all-levels="false" 仅显示最后一级， :filterable="true" 可搜索
        props{ multiple: true 多选， emitPath: false 只返回子节点的value } -->
        <el-cascader
          :disabled="disabled"
          style="display: block"
          v-model="formData.labelIds"
          :options="labelOptions"
          :show-all-levels="false"
          :props="{
            multiple: true,
            emitPath: false,
            children: 'labelList',
            value: 'id',
            label: 'name'
          }"
          :filterable="true"
          clearable/>
      </el-form-item>
      <el-form-item label="内容:" prop="content">
        <!-- 主体内容，使用 mavon-editor 渲染出markdown编辑器
        autofocus 是否自动获取焦点
        -->
        <mavon-editor :autofocus="false"
                      ref="md" v-model="formData.mdContent" @change="getMdHtml"
                      @imgAdd="uploadContentImg" @imgDel="delContentImg"/>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button type="primary" @click="submitForm('formData')">发布问题</el-button>
    </el-row>
  </div>
</template>


<script>
export default {
  // 引用权限中间件
  middleware: 'auth',

  // 服务端渲染
  async asyncData({query, app}) {
    // 查询分类与标签
    const {data} = await app.$getCategoryAndLabel()
    // 查询文章详情
    if (query.id) {
      const {data: formData} = await app.$getQuestionById(query.id)
      return {labelOptions: data, formData}
    }
    return {labelOptions: data}
  },

  data() {
    const validateLabel = (rule, value, callback) => {
      // value获取输入框的值

      // 有 value 值才校验，不然提交的时候会报错
      if (value && value.length > 5) {
        this.disabled = true // 禁止点击
        callback(new Error('最多可选5个标签'))
      } else {

        // 校验通过放行
        callback()
        this.disabled = false
      }
    } // 万分强调：最后这里不要有逗号
    const validateContent = (rule, value, callback) => {
      if (this.formData.mdContent && this.formData.htmlContent) {
        // 有内容则放行
        callback()
      } else {
        callback(new Error('请求输入文章内容'))
      }
    } // 不要有逗号
    return {
      rules: { // ++++++++++修改
        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
        labelIds: [
          {required: true, message: '请选择标签', trigger: 'blur'},
          {validator: validateLabel, trigger: 'change'},
        ],
        content: [{validator: validateContent, trigger: 'change'}]
      },
      formData: { // 表单数据
        userId: this.$store.state.userInfo.uid,
        userImage: this.$store.state.userInfo.imageUrl,
        nickName: this.$store.state.userInfo.nickName,
      },
      disabled: false, // 标签输入框默认可输入
      labelOptions: [] // 标签下拉框
    }
  },

  methods: {
    // 提交表单
    submitForm(formName) {
      // 校验通过
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("校验通过，提交数据")
          console.log(this.formData)
          // 校验通过，提交数据
          this.submitData()
        } else {
          // 验证不通过
          return false;
        }
      })
    },

    // 2. 异步方法提交数据
    async submitData() {
      let response = null

      // 有 id 值则修改，没有id则新增
      if (this.formData.id) {
        response = await this.$updateQuestion(this.formData)
      } else {
        response = await this.$addQuestion(this.formData)
      }
      if (response.code === 20000) {
        // 提交成功,
        this.$message.success('提交成功')

        // 跳转到详情页, data封装的就是保存后的文章id
        this.$router.push(`/question/${response.data}`)
      }
    },

    // mdContent: md 内容，htmlContent：转成后的html
    getMdHtml(mdContent, htmlContent) {
      //console.log('mdContent', mdContent)
      //console.log('htmlContent', htmlContent)
      this.formData.mdContent = mdContent
      this.formData.htmlContent = htmlContent
    },


    // 上传内容图片 (图片位置编号, File对象)
    uploadContentImg(pos, file) {
      // console.log('上传内容图片', file)

      // 第一步.将图片上传到服务器
      let fd = new FormData();
      fd.append('file', file);
      this.$uploadImg(fd).then(response => {
        console.log(response)
        // 第二步.将返回的url替换到文本原位置! [...](0) -> ![...](url)
        this.$refs.md.$img2Url(pos, response.data)
      })
    },

    // 删除内容图片
    delContentImg(urlAndFileArr) {
      const fileUrl = urlAndFileArr[0] // 文件URL
      const file = urlAndFileArr[1] // File对象
      console.log('删除内容图片', fileUrl, file)
      this.$deleteImg(fileUrl)
    },


  }
}
</script>


<style>
  .hzs-ask-question{
    border-radius: 20px;
    box-shadow: 0 0 20px black;
    background-color: rgba(255,255,255, 0.9);
    margin-bottom: 100px;
    padding: 30px 100px 30px 100px;
  }
</style>
